<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap { 
        margin: auto;
      }
      .btn { 
        display: flex;
        justify-content: space-around;
        width: 100%;
      }
      #red {
        background-color: red;
        width: 30px;
        height: 30px;
      }
      #green {
        background-color: green;
        width: 30px;
        height: 30px;
      }
      #black {
        background-color: black;
        width: 30px;
        height: 30px;
      }
      ul {
        padding-left: 0 !important;
        width: 600px;
        display: flex;
        margin-top: 30px;
        margin: auto;
      }
      li {
        display: block;
        list-style-type: none;
        width: 100px;
        color: green;
        border: 1px green solid;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="btn">
        <div onMouseUp="d_red()" id="red"></div>
        <div  onMouseUp="d_green()" id="green"></div>
        <div  onMouseUp="d_black()" id="black"></div>
      </div>
      <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </body>
</html>
<script>
  var red = document.getElementById("red");
  var green = document.getElementById("green");
  var black = document.getElementById("black");
  var ul=document.getElementById('ul') 
  var body_=document.querySelector('body')
  function d_red() {
      red.style.cssText="background-color: #fff;box-sizing: border-box;border: 10px red solid;"
      body_.style.backgroundColor="#ff0076"
      ul.style.backgroundColor="red"
      green.style.cssText="background-color: green;box-sizing: border-box;border:none;"
      black.style.cssText="background-color: black;box-sizing: border-box;border:none;"
  }
  function d_green() {
      green.style.cssText="background-color: #fff;box-sizing: border-box;border: 10px green solid;"
      body_.style.backgroundColor="#718000"
      ul.style.backgroundColor="green"
      
      red.style.cssText="background-color: red;box-sizing: border-box;border:none;"
      black.style.cssText="background-color: black;box-sizing: border-box;border:none;"
  }
  function d_black() {
      black.style.cssText="background-color: #fff;box-sizing: border-box;border: 10px black solid;"
      body_.style.backgroundColor="#cccccc"
      ul.style.backgroundColor="black"
      red.style.cssText="background-color: red;box-sizing: border-box;border:none;"
      green.style.cssText="background-color: green;box-sizing: border-box;border:none;"
  }
</script>
